<template>
  <transition name="fade">
    <div
      v-show="visible"
      class="m-loading"
      :class="[customClass, { 'is-fullscreen': fullscreen }]"
      :style="{ backgroundColor: background || '' }">
      <div class="m-loading-spinner"
        :class="vertical === 'middle' ? 'middle' : 'top'"
        :style="{ top: vertical === 'middle' ? 0 : vertical }">
        <svg-icon v-if="!spinner" class="m-loading-icon" icon-class="loading-circle"></svg-icon>
        <i v-else :class="spinner"></i>
        <p v-if="text" class="m-loading-text">{{ text }}</p>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'loading',
  data () {
    return {
      text: null,
      spinner: null,
      background: null,
      fullscreen: false,
      visible: false,
      customClass: '',
      vertical: 'middle' // or 10px
    }
  },
  methods: {
    setText (text) {
      this.text = text
    }
  }
}
</script>

<style lang="scss" scoped>
.m-loading {
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  &.is-fullscreen {
  }

  &-spinner {
    position: absolute;
    width: 100%;
    height: 1rem;
    text-align: center;
    color: #000;
    /* background-color: #ccc; */

    &.middle {
      margin: auto;
      top: 0;
      bottom: 0;
    }

    &.top {
      top: 10px;
    }
  }

  &-icon {
    display: inline-block;
    font-size: 20px;
    color: #ff4040;
    animation: m-rotate linear 1s 0s infinite;
  }

  &-text {
    font-size: 12px;
    padding: .1rem 0;
  }

  @keyframes m-rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
</style>
